<template>
  <div  >
    <!--      标题-->
    <div class="title">商品</div>
    <div style="text-align: right;margin-top: 10px;margin-right: 10px;display: flex;padding-left: 2px;">
      <tiny-button @click="add" type="info" size="large">新增</tiny-button>
      <span style="margin-left: 50px;">
        <div style="height: 50px;width: 50px;">
          <import-excel @change="change"></import-excel>
        </div>
      </span>
    </div>
    <div style="margin-top: 10px;" >
      <j-grid :columns="cols"  v-model="state.list" bind-data :offset-height="20" :show-footer="false" :offset-width="105"></j-grid>
    </div>
    <tiny-dialog-box v-model:visible="state.show">
      <div style="width: 300px">
        <tiny-form>
          <tiny-form-item label="商品名称" required >
            <JInput v-model="model.invName" placeholder="商品名称"></JInput>
          </tiny-form-item>
          <tiny-form-item label="规格" required>
            <JInput  v-model="model.spec"></JInput>
          </tiny-form-item>
          <tiny-form-item label="大单位" required>
            <JInput  v-model="model.unit1"></JInput>
          </tiny-form-item>
          <tiny-form-item label="小单位" required>
            <JInput  v-model="model.unit2"></JInput>
          </tiny-form-item>
        </tiny-form>
      </div>
      <div style="height: 50px;"></div>
      <div style="text-align: center;">
        <tiny-button  @click="savecontinue"  size="large"  >保存并继续</tiny-button>
        <tiny-button  style="margin-left: 100px;" type="info" size="large" @click="saveclose">保存</tiny-button>
      </div>
      <div style="height: 100px;"></div>
    </tiny-dialog-box>
    <!--底部按钮-->
  </div>
</template>
<script setup>
// 送货员
import tool from "@/utils/tool";
import {onMounted, ref} from "vue";
import ImportExcel from "@/lui/importExcel.vue";

const state = ref({
  show: false,
  list: [],
})
const model = ref({
  invName:'',
  spec: '',
  unit1:'',
  unit2: ''
})
const data = ref([])
onMounted(() => {
  getList()
})
const cols = ref([
  {type:'index', title: '', width: 70},
  {field: 'invName', title: '商品名称', width: 500,align: 'left',headerAlign:'center'},
  {field: 'spec', title: '规格', width: 100,headerAlign: 'center'},
  {field: 'unit1', title: '大单位', width: 90,align: 'center'},
  {field: 'unit2', title: '小单位', width: 90,align: 'center'},
  {field: '', title: '操作', width: 120,align: 'center',className: 'canClick',btns:[
      {id:'edit',label:'修改',click: (row, rowIndex) => {
          editRow(rowIndex, row)
        }}
      ,{id:'del',label:'删除',click: (row, rowIndex) => {
        delRow(rowIndex, row)
      }}]},
])
const delRow = (index, row) => {
  tool.confirm('确认删除?').then(() => {
    tool.post('justdeliver/goods',{which: 'del', id: row.id}, true).then(ret => {
      if(ret.stat) {
         getList()
      }
    })
  })
}
const editRow = (index, row) => {
  model.value = row
  state.value.show = true
}
const getList = () => {
  tool.post('justdeliver/goods', {which: 'list'}).then(ret => {
    state.value.list = ret.data
  })
}
const add = () => {
  model.value = {
    id: '',
    invName:'',
    spec: '',
    unit1:'',
    unit2: ''
  }
  state.value.show = true
}
const change = (url) => {
  tool.post('justdeliver/goods',{which: 'exportIn', formData: url}).then(ret => {
    if(ret.stat) {
      getList()
      // window.location.reload()
    }
  })
}

const savecontinue = () => {
  tool.post('justdeliver/goods', {which: 'save',formData: model.value}).then(ret => {
    if(ret.stat) {
      getList()
      model.value = {
        id: '',
        invName:'',
        spec: '',
        unit1:'',
        unit2: ''
      }
    }
  })
}
const saveclose = () => {
  tool.post('justdeliver/goods', {which: 'save',formData: model.value}).then(ret => {
    if(ret.stat) {
      state.value.show = false
      getList()
    }
  })
}
</script>
<style scoped lang="scss">
:deep(.input-label) {
  width: 50px !important;
  height: 50px !important;
}
.title {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  background-color: #01aaee;
  color: white;
  height: 40px;
  line-height: 40px;
}
.item {
  width: 150px;
  background: #fac20a;
  margin: 10px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  color: white;
}
</style>